class Banner{
    constructor(){
        this.all = document.querySelector(".all")
        this.url = "http://localhost:3000/api";

        this.index = 0;
        // 1. 获取数据
        this.getData();
    }
    getData(){
        // console.log(123)
        ajax({
            url:this.url,
            data:{
                type:"getBanner"
            },
            success:res => {
                // 2. 解析数据
                // console.log(res);
                this.res = JSON.parse(res);
                // console.log(this.res);
                // console.log(this.res.length)

                    // 4. 渲染页面
                    this.render();

            }
        })
    }
    render(){
        let str = "";
        this.res.forEach(val=>{
            // console.log(val)
            // console.log(val.title);
            // console.log(val.bigImg);
            // console.log(val.img1);
            // console.log(val.img2);
            // console.log(val.img3);
            str+=`
            <div class="belong floor floor${val.id}" >
            <h2>${val.title}</h2>
            <ul>
            <li><a href="">${val.nav1}</a></li>
            <li><a href="">${val.nav2}</a></li>
            <li><a href="">${val.nav3}</a></li>
            <li><a href="">${val.nav4}</a></li>
            <li><a href="">${val.nav5}</a></li>
            </ul>
            <div class="pic">
                <img src="${val.bigImg}" alt="">
                <div class="s1">
                    <img src="${val.img1}" alt="">
                    <span class="head">${val.alt1}</span>
                    <div class="fuli">积分抵50%</div>
                    <span>￥${val.price}<del id="spec">￥${val.price_del}</del></span>
                </div>
                <div class="s2">
                    <img src="${val.img2}" alt="">
                    <span class="head">${val.alt2}</span>
                    <div class="fuli">积分抵50%</div>
                    <span>￥${val.price}<del id="spec">￥${val.price_del}</del></span>
                </div>
                <div class="s3">
                    <img src="${val.img3}" alt="">
                    <span class="head">${val.alt3}</span>
                    <div class="fuli">积分抵50%</div>
                    <span>￥${val.price}<del id="spec">￥${val.price_del}</del></span>
                </div>
            </div>
        </div>`                        
        })

        this.all.innerHTML = str;
    }
}

new Banner();






